html{
    font-size: 5.3333333vw;
}
body{
    background-color: #f6f6f6;
}
/* header */
header{
    width: 18.75rem;
    height: 2.2rem;
    background-color: #c82519;
    display: flex;
    align-items: center;
    position: sticky;
    z-index: 100;
    top: 0rem;
    a{
        >span{
            display: inline-block;
            transform: scale(1.5);
            color: #ffffff;
            margin-left: .75rem;
        }
    }
    .search{
        width: 13.65rem;
        height: 1.5rem;
        border-radius: .75rem;
        background-color: white;
       /*  margin: auto; */
        margin: 0rem .75rem;
        display: flex;
        box-sizing: border-box;
        div{
           display: flex;
           img{
                width: 1rem;
                height: .75rem;
                margin: .4rem .4rem 0rem .75rem;
            }
            &::after{
                content: "";
                display: block;
                width: .05rem;
                height: .8rem;
                background-color: #dddddd;
                margin: .4rem .4rem 0rem .1rem;
            }
            
        }
        span{
            color: #dddddd;
            margin: .4rem .4rem 0rem .1rem;
        }
        input[type="text"]{
            outline: none;
            border: none;
        }
    }
    a{
        font-size: .8rem;
        color: white;
    }
}
/* slideshow */
.slideshow{
    position: relative;
    height: 7.2rem;
    width: 18.75rem;
    &::before{
        content: "";
        position: absolute;
        width: 18.75rem;
        height: 5.25rem;
        background-color: #c82519;
        border-bottom-left-radius: 20%;
        border-bottom-right-radius: 20%;
        z-index: -1;
    }
    .container{
        width: 17.5rem;
        height: 7rem;
        overflow: hidden;
        margin: auto;
        left: 0rem;
        right: 0rem;
        position: relative;
        border-radius: .5rem;
        .pic{
            width: 52.5rem;
            height: 7rem;
            position: absolute;
            left: 0rem;
            display: flex;
            animation: slideshow 4s 1s steps(3,end) infinite;
            img{
                width: 17.5rem;
                height: 7rem;
            }
        }
    }
    div:nth-child(2){
        height: 4.1rem;
        width: 18.75rem;
        position: relative;
        &::after{
            content: "";
            display: block;
            width: 0.5rem;
            height: 0.5rem;
            background-color: #fa2c19;
            border-radius: 50%;
            position: absolute;
            top: 3rem;
            left: 7.5rem;
            animation: small-circle 4s 1s steps(3,end) infinite;
        }
        ul{
            position: absolute;
            display: flex;
            top: 3rem;
            left: 7.5rem;
            li{
                width: 0.5rem;
                height: 0.5rem;
                background-color: white;
                border-radius: 50%;
                margin-right: .75rem;
            }
        }
    }
    
}
@keyframes slideshow{
    from{
        left:0rem;
    }
    to{
        left: -52.5rem;
    }
}
@keyframes small-circle{
    from{
        left: 7.5rem;
    }
    to{
        left: 11.25rem;
    }
}
/* classify产品分类 */
.classify{
    width: 18.75rem;
    height: 8.1rem;
    /* box-sizing: border-box;
    padding: 0rem .61rem; */
    display: flex;
    flex-wrap: wrap;
    margin-top: 4.1rem;
    div{
        box-sizing: border-box;
        width: 3.75rem;
        height: 3.65rem;
        text-align: center;
        >a:nth-child(1){
            img{
                width: 2rem;
                height: 2rem;
            }
        }
        >a:nth-child(2){
            font-size: .6rem;
            display: block;
        }
    }
} 
.product{
    width: 18.75rem;
    .pictures:nth-child(1){
        width: 17.75rem;
        height: 11.85rem;
        background-color: white;
        border-radius: .5rem;
        margin: auto;
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        padding: 0rem .8rem;
        .second{
            width: 17.75rem;
            height: 1.7rem;
            background-image: url(../images/bj1.png);
            background-size: 100%;
            line-height: 1.7rem;
            >span:nth-child(1){
                font-size: .7rem;
                margin-left: .5rem;
            }
            .red{
                font-size: .6rem;
                color: #f27d8c;
            }
            .white{
                font-size: .6rem;
                display: inline-block;
                width: .75rem;
                height: 1rem;
                line-height: 1rem;
                text-align: center;
                color: white;
                background-color: #fb3b29;
            }
            >a:nth-of-type(1){
                margin-left: 3rem;
            }
            >a:nth-of-type(2){
                font-size: .5rem;
                color: white;
                display: inline-block;
                width: .6rem;
                height: .6rem;
                line-height: .6rem;
                border-radius: 50%;
                background-color: #f23737;
            }
        }
        .small-img{
            width: 8rem;
            height: 10.1rem;
            img{
                width: 8rem;
                height: 8rem;
            }
            h1{
                text-align: center;
                font-size: .6rem;
                color: #f2270c;
            }
        }
        
    }
    .pictures:nth-child(2){
        display: flex;
        justify-content: space-between;
        width: 17.75rem;
        height: 11rem;
        margin: 1rem auto 0px;
        border-radius: .5rem;
        .small-img{
            width: 8.5rem;
            height: 10rem;
            background-color: white;
            border-radius: .5rem;
            text-align: center;
            img{
                width: 8rem;
                height: 8rem;
            }
            h1{
                text-align: center;
                font-size: .6rem;
                color: #f2270c;
            }
        }
    }
    
}
footer{
   width: 18.75rem; 
   height: 2.5rem;
   background-color: white;
   display: flex;
   justify-content: space-evenly;
   position: sticky;
   z-index: 100;
   bottom: 0;
   a{
       img{
           width: 3rem;
           height: 2.3rem;
       }
   }
}